<template>
  <svg
    class="btn"
    :style="'width:'+width+';height:'+height+';'"
    id="eP2RGiOpKsQ1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 150 150"
    shape-rendering="geometricPrecision"
    text-rendering="geometricPrecision"
  >
    <g id="eP2RGiOpKsQ2" transform="matrix(1 0 0 1 -25 -25)">
      <path
        id="eP2RGiOpKsQ3"
        d="M100,25C129.3088,25,154.69102,41.81166,167.02949,66.31778C159.53073,60.18153,149.9453,56.5,139.5,56.5C115.47561,56.5,96,75.97561,96,100C96,119.60611,80.10611,135.5,60.5,135.5C40.89389,135.5,25,119.60611,25,100C25,58.57864,58.57864,25,100,25Z"
        transform="matrix(1 0 0 1 0.001761 0)"
        :fill="color?color:'red'"
        fill-opacity="1"
        stroke="rgb(0,0,0)"
        stroke-width="0"
      />
      <path
        id="eP2RGiOpKsQ5"
        d="M32.90728,100C32.90728,99.99675,32.90728,99.99349,32.90728,99.99024C32.91256,62.99165,62.90745,33,99.90728,33C116.27089,33,131.26436,38.86623,142.89943,48.61041C141.77574,48.53719,140.64221,48.5,139.5,48.5C111.05734,48.5,88,71.55734,88,100C87.9691,100,87.93819,100,87.90728,100C87.90728,115.18783,75.59511,127.5,60.40728,127.5C45.21945,127.5,32.90728,115.18783,32.90728,100Z"
        fill="rgb(255,255,255)"
        fill-opacity="0.6"
        stroke="rgb(0,0,0)"
        stroke-width="0"
      />
      <ellipse
        @click="$emit('onLeftClick')"
        id="eP2RGiOpKsQ4"
        rx="27.5"
        ry="27.5"
        transform="matrix(1 0 0 1 60.407279 100)"
        fill="rgb(255,255,255)"
        fill-opacity="0.8"
        stroke="rgb(0,0,0)"
        stroke-width="0"
      />
    </g>
    <g id="eP2RGiOpKsQ6" transform="matrix(-1 0 0 -1 174.93853 174.870683)">
      <path
        id="eP2RGiOpKsQ7"
        d="M100,25C129.3088,25,154.69102,41.81166,167.02949,66.31778C159.53073,60.18153,149.9453,56.5,139.5,56.5C115.47561,56.5,96,75.97561,96,100C96,119.60611,80.10611,135.5,60.5,135.5C40.89389,135.5,25,119.60611,25,100C25,58.57864,58.57864,25,100,25Z"
        :fill="color?color:'red'"
        fill-opacity="1"
        stroke="rgb(0,0,0)"
        stroke-width="0"
      />
      <path
        id="eP2RGiOpKsQ9"
        d="M32.90728,100C32.90728,99.99675,32.90728,99.99349,32.90728,99.99024C32.91256,62.99165,62.90745,33,99.90728,33C116.27089,33,131.26436,38.86623,142.89943,48.61041C141.77574,48.53719,140.64221,48.5,139.5,48.5C111.05734,48.5,88,71.55734,88,100C87.9691,100,87.93819,100,87.90728,100C87.90728,115.18783,75.59511,127.5,60.40728,127.5C45.21945,127.5,32.90728,115.18783,32.90728,100Z"
        fill="rgb(255,255,255)"
        fill-opacity="0.6"
        stroke="rgb(0,0,0)"
        stroke-width="0"
      />
      <ellipse
        @click="$emit('onRightClick')"
        id="eP2RGiOpKsQ8"
        rx="27.5"
        ry="27.5"
        transform="matrix(1 0 0 1 60.407279 100)"
        fill="rgb(255,255,255)"
        fill-opacity="0.8"
        stroke="rgb(0,0,0)"
        stroke-width="0"
      />
    </g>
    <text
      xmlns="http://www.w3.org/2000/svg"
      id="eg03SaYUy9v10"
      dx="0"
      dy="0"
      font-family="&quot;Roboto&quot;"
      transform="matrix(1 0 0 1 35 81.740912)"
      fill="rgb(0,0,0)"
      stroke="none"
      stroke-width="0"
    >
      <tspan
        id="eg03SaYUy9v11"
        x="0"
        y="0"
        text-anchor="middle"
        font-family="Roboto"
        font-size="20"
        transform="matrix(1 0 0 1 32.0391 70.737914)"
        :fill="color?color:'red'"
        stroke="none"
        stroke-width="0"
      >{{textL?textL:'左旋'}}</tspan>
    </text>
    <text
      xmlns="http://www.w3.org/2000/svg"
      id="eg03SaYUy9v12"
      dx="0"
      dy="0"
      font-family="&quot;Roboto&quot;"
      transform="matrix(1 0 0 1 114 81.740912)"
      fill="rgb(0,0,0)"
      stroke="none"
      stroke-width="0"
    >
      <tspan
        id="eg03SaYUy9v13"
        x="0"
        y="0"
        font-family="Roboto"
        text-anchor="middle"
        font-size="20"
        transform="matrix(1 0 0 1 32.0391 70.737914)"
        :fill="color?color:'red'"
        stroke="none"
        stroke-width="0"
      >{{textR?textR:'右旋'}}</tspan>
    </text>
  </svg>
</template>

<script>
export default {
  name: 'btnLeftRight',
  //颜色(默认red),宽度(默认100px),高度(默认100px),左文本(默认左旋),右文本(默认右旋)
  //宽高可以直接通过style进行控制,颜色不行
  //可添加onLeftClick,onRightClick两个点击事件
  props: ['color', 'width', 'height', 'textL', 'textR']
}
</script>

<style lang="scss" scoped>
.btn {
  width: 100px;
  height: 100px;
}
</style>